<template>
	<uni-popup ref="popup" :is-mask-click="false">
		<view class="relative">
			<image class="absolute size-32" style="top:-44px;right:0" src="@/static/svg/icon-close.svg" @click="onClose"></image>
			<view v-if="data" class="popup-content">
				<view class="mb-20 text-color-regular fs-16 font-medium text-center"><text>活动红包</text></view>
				<block v-if="data.receiveState===1">
					<view v-if="data.remainNum" class="red-packet-item">
						<view class="bg-ticket">
							<view class="flex center" style="width:81px;">
								<text class="color-primary fs-20 font-bold"><text class="fs-12 font-normal">¥</text>{{numberFormat(data.firstRedPacketAmt)}}</text>
							</view>
							<view class="split-line"></view>
							<view class="flex flex-col ml-16">
								<text class="color-primary fs-16 font-bold mb-4">{{data.title || '新人首单优惠'}}</text>
								<text class="text-color-regular fs-12 font-normal" style="opacity:0.6;">有效期{{data.validDay}}天</text>
							</view>
						</view>
						<view class="right-box">
							<view class="button" @click="toReceive">立即领取</view>
						</view>
					</view>
					<view v-else class="red-packet-item-valid">
						<view class="flex">
							<view class="flex center" style="width:81px;">
								<text class="color-primary fs-20 font-bold"><text class="fs-12 font-normal">¥</text>{{numberFormat(data.firstRedPacketAmt)}}</text>
							</view>
							<view class="split-line"></view>
							<view class="flex flex-col ml-16">
								<text class="color-primary fs-16 font-bold mb-4">{{data.title || '新人首单优惠'}}</text>
								<text class="text-color-regular fs-12 font-normal" style="opacity:0.6;">有效期{{data.validDay}}天</text>
							</view>
						</view>
						<view class="right-box">
							<image style="width:52px;height:52px;" src="@/pagesB/static/activity/redpacket-empty.svg"></image>
						</view>
					</view>
				</block>
				<!-- 已使用也显示已领取 -->
				<view v-else-if="[2,3,4].includes(data.receiveState)" class="red-packet-item-valid">
					<view class="flex item-center">
						<view class="inline-flex center" style="width:81px;">
							<text class="color-primary fs-20 font-bold"><text class="fs-12 font-normal">¥</text>{{numberFormat(data.firstRedPacketAmt)}}</text>
						</view>
						<view class="split-line"></view>
						<view class="flex flex-col ml-16">
							<text class="color-primary fs-16 font-bold mb-4">{{data.title || '新人首单优惠'}}</text>
							<text class="text-color-regular fs-12 font-normal" style="opacity:0.6;">有效期{{data.validDay}}天</text>
						</view>
					</view>
					<view class="right-box">
						<image style="width:52px;height:52px;" src="@/pagesB/static/activity/redpacket-received.svg"></image>
					</view>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup name="RedPacketDialog">
	import { ref } from 'vue'
	import { receivePedPacketApi } from '@/api/activity.js'
	import { numberFormat } from '@/utils/index.js'
	
	const props = defineProps({
		data: {
			type: Object,
			required: true
		}
	})
	
	const emits = defineEmits('receiveSuccess')

	const popup = ref(null)
	
	const onClose = () => {
		popup.value && popup.value.close()
	}

	const showDialog = (value) => {
		if (value) {
			popup.value && popup.value.open()
		} else {
			popup.value && popup.value.close()
		}
	}
	
	const toReceive = () => {
		receivePedPacketApi({
			activeId: props.data.activeId,
			redPacketId: props.data.id
		}).then(res => {
			if (res) {
				uni.showToast({
					icon: 'none',
					title: '领取成功'
				})
				emits('receiveSuccess')
				onClose()
			}
		})
	}
	
	defineExpose({
		showDialog
	})
</script>

<style lang="scss" scoped>
	.popup-content {
		padding: 48rpx 32rpx;
		border-radius: 24rpx;
		background: #F5F5F5;
		width: calc(100vw - 96rpx);
		
		.red-packet-item {
			position: relative;
			height: 182rpx;
			padding: 16rpx 0 16rpx 16rpx;
			border-radius: 24rpx;
			background: #FA4543;
			
			.bg-ticket {
				display: flex;
				align-items: center;
				background: url('@/static/svg/activity/bg-ticket.svg') no-repeat;
				background-size: contain;
				height: 100%;
			}
			.split-line {
				background: url('@/static/svg/activity/split-line.svg') no-repeat;
				height: 107rpx;
				width: 2rpx;
			}
			
			.right-box {
				background: url('@/static/svg/activity/bg-red-packet-right.png') no-repeat;
				background-size: 100% 100%;
				width: 206rpx;
				height: 182rpx;
				position: absolute;
				right: 0;
				top: 0;
				transform: scale(1.1);
				fill: #FA4543;
				filter: drop-shadow(0px 0px 6rpx rgba(42, 0, 0, 0.70));
				display: inline-flex;
				align-items: center;
				
				.button {
					display: inline-flex;
					padding: 4rpx 16rpx;
					justify-content: center;
					align-items: center;
					border-radius: 16rpx;
					background: #FFF;
					position: absolute;
					right: 24rpx;
					
					color: #FA4543;
					text-align: center;
					font-size: 24rpx;
					font-weight: 600;
					line-height: 44rpx;
				}
			}
		}
		
		.red-packet-item-valid {
			display: flex;
			align-items: center;
			position: relative;
			height: 182rpx;
			padding: 16rpx 0 16rpx 16rpx;
			border-radius: 24rpx;
			background: url('@/static/svg/activity/bg-ticket.svg') no-repeat;
			background-size: 100% 100%;
			
			.split-line {
				background: url('@/static/svg/activity/split-line.svg') no-repeat;
				height: 107rpx;
				width: 2rpx;
			}
			.right-box {
				position: absolute;
				right: 28rpx;
			}
		}
	}
</style>